<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Chrome的debug调试</title>
    <!-- 
    在Chrome浏览器中，调试JavaScript代码是一个非常重要的技能，可以帮助开发者快速发现和修复问题。以下是关于Chrome调试工具的一些总结和说明：

      1. 打开开发者工具
      - 可以通过右键单击页面并选择“检查”或使用快捷键  `F12`  或  `Ctrl + Shift + I` （Windows）/  `Cmd + Option + I` （Mac）来打开开发者工具。

      2. 使用控制台（Console）
      - 查看输出：使用  `console.log()`  输出变量和信息，以便在控制台查看。
      - 执行代码：可以在控制台直接输入和执行JavaScript代码，方便测试小段代码。
      - 查看错误信息：在控制台中可以看到JavaScript运行时的错误和警告，帮助快速定位问题。

      3. 使用源代码面板（Sources）
      - 设置断点：在需要调试的代码行上点击行号可以设置断点。代码执行到断点时会暂停，方便检查变量状态。
      - 单步执行：使用“步入”（F11）、“步出”（Shift + F11）和“单步调试”（F10）功能逐行执行代码，观察每一步的变化。
      - 查看调用栈：在断点暂停时，可以查看调用栈，了解代码的执行路径。

      4. 使用网络面板（Network）
      - 监控网络请求：查看所有的网络请求，包括XHR、Fetch、图片等，了解资源加载情况。
      - 查看请求和响应：点击请求可以查看详细的请求和响应信息，帮助调试与服务器交互的问题。

      5. 使用性能面板（Performance）
      - 录制性能：可以录制页面的性能，查看JavaScript执行、渲染等的时间分布，帮助识别性能瓶颈。
      - 分析帧率：查看页面的帧率和渲染时间，确保页面流畅运行。

      6. 使用元素面板（Elements）
      - 查看和修改DOM：可以查看页面的HTML结构，并实时修改元素的属性和样式，方便调试UI问题。
      - 查看CSS样式：查看和编辑元素的CSS样式，帮助调试样式相关的问题。

      7. 使用快照和内存面板（Memory）
      - 内存快照：可以查看内存使用情况，帮助识别内存泄漏问题。
      - 分配分析：分析内存分配情况，找出不必要的内存使用。

      8. 使用设置（Settings）
      - 自定义快捷键：可以在设置中自定义开发者工具的快捷键，提高调试效率。
      - 启用实验功能：可以启用一些实验性的功能，尝试新的调试工具。

      9. 使用条件断点
      - 可以在设置断点时添加条件，使得只有在特定条件满足时才会暂停执行，帮助更精确地调试代码。

      10. 使用黑盒脚本
      - 可以将第三方库或不需要调试的代码标记为“黑盒”，使得调试时不会进入这些脚本，保持调试的专注。
   -->
  </head>
  <body>
    <script>
      // 1. 打开开发者工具
      // 2. 使用控制台
      // 3. 使用源代码面板
      // 4. 使用网络面板
      // 5. 使用性能面板
      // 6. 使用元素面板
      // 7. 使用快照和内存面板
      // 8. 使用设置

      for (let i = 0; i < 10; i++) {
        console.log(i);
        debugger;
      }
    </script>
  </body>
</html>
